<?if($haveMeals):?>
<!-- javascript to hide and show "add recipe" block -->
<script type='text/javascript'>
$(document).ready(function() {
	$('#new_meal_form').css("display", "none");
	$('.plus_minus').click(show_hide);
	$.each($('.meal_container'), function() {
		$(this).mouseenter(function() {
			//alert("hello from "+$(this).attr('id'));
			$('#btns_'+$(this).attr('id').split('_')[1]).css("visibility","visible");
		});
		$(this).mouseleave(function() {
			//alert("hello from "+$(this).attr('id'));
			$('#btns_'+$(this).attr('id').split('_')[1]).css("visibility","hidden");
		});
	});
	
});

function show_hide() 
{
	if($("#new_meal_form").css("display") == "none") {
		$('#new_meal_form').css("display", "block");
		$('.plus_minus').html("&ndash;");	
	} else {
		$('#new_meal_form').css("display", "none");
		$('.plus_minus').html("+");	
	}
		
}
</script>
<?endif;?>
<h2 class="date"><?=date('l, F jS, Y')?>
<? if($haveMeals): ?><h2>So far we've got:</h2>
	<? foreach($query->result() as $meal): ?>
		<div class="meal_container" id="option_<?=$meal->id?>">
			<div class="meal_buttons" id="btns_<?=$meal->id?>" style="visibility:hidden;">
				<?= anchor("managemeals/meal_veto/".$meal->id, "remove")?>
			</div>
			<div class="meal_option">
				<h4><?=$meal->meal_name?></h4>
				<? if($meal->meal_link != ''): ?>
					<p><?= anchor_popup($meal->meal_link, substr($meal->meal_link,0,40)."...")?></p>
				<? endif;?>
				<span style="visibility: hidden; display: none;"><?=$meal->id?></span>
			</div>
		</div>
	<?endforeach;?>
<?endif;?>
<div id="add_meal">
	<?if($haveMeals):?>
		<h2><span class="plus_minus">+</span>Got a better idea?</h2>
	<?else:?>
		<h2>Be the first!</h2>
	<?endif;?>
	<div id="new_meal_form">
		<?=form_open('managemeals/meals_insert')?>
			<?=form_hidden('date_submitted',date('Y-m-d'))?>
			<table>
				<tr>
					<td valign="top"><label for="meal">What is it?</label></td>
					<td><textarea cols="30" rows="5" name="meal_name"></textarea></td>
				</tr>
				<tr>
					<td><label for="meal_link">Link?</label></td>
					<td><input type="text" size="30" name="meal_link" /></td>
				</tr>
				<tr>
					<td></td>
					<td><input type="submit" id="submit_btn" value=" YUM! "></td>
				</tr>
			</table>
		</form>
	</div>
</div>
